<template>
  <view class="knowledge-detail-container">
    <!-- 顶部导航 -->
    <view class="top-nav">
      <button @click="goBack" class="back-btn">
        <text>&lt;</text>
      </button>
      <text class="title">{{ knowledgeData.title }}</text>
      <button class="save-btn" :class="isFavorite ? 'favorited' : ''" @click="toggleFavorite">
        <text>{{ isFavorite ? '★' : '☆' }}</text> {{ isFavorite ? '已收藏' : '收藏' }}
      </button>
    </view>

    <!-- 视频讲解区域 -->
    <view class="video-section" v-if="knowledgeData.videoUrl">
      <text class="section-title">视频讲解</text>
      <view class="video-container">
        <view class="video-placeholder" v-if="!isVideoPlaying">
          <image :src="knowledgeData.videoCover || '/static/logo.png'" mode="aspectFill" class="video-cover"></image>
          <view class="play-button" @click="playVideo">
            <text>播放</text>
          </view>
          <view class="video-time">
            <text>{{ videoDuration }}</text>
          </view>
        </view>
        <video
          v-else
          :src="knowledgeData.videoUrl"
          controls
          class="video-player"
          :poster="knowledgeData.videoCover || '/static/logo.png'"
          @ended="onVideoEnded"
        ></video>
        <view class="video-info">
          <text class="video-title">{{ knowledgeData.videoTitle }}</text>
          <text class="video-teacher">{{ knowledgeData.teacher }}</text>
        </view>
      </view>
    </view>

    <!-- 详细说明区域 -->
    <view class="detail-section">
      <text class="section-title">详细说明</text>
      <view class="content-card">
        <rich-text :nodes="knowledgeData.description || '<p>暂无详细说明</p>'"></rich-text>
      </view>
    </view>

    <!-- 重要原理区域 -->
    <view class="principle-section" v-if="knowledgeData.principle">
      <text class="section-title">重要原理</text>
      <view class="content-card principle-card">
        <rich-text :nodes="knowledgeData.principle"></rich-text>
        <view class="principle-image" v-if="knowledgeData.principleImage">
          <image :src="knowledgeData.principleImage || '/static/logo.png'" mode="aspectFit" class="principle-img"></image>
        </view>
      </view>
    </view>

    <!-- 应用实例区域 -->
    <view class="examples-section" v-if="knowledgeData.examples">
      <text class="section-title">应用实例</text>
      <view class="content-card">
        <rich-text :nodes="knowledgeData.examples"></rich-text>
      </view>
    </view>

    <!-- 相关知识点区域 -->
    <view class="related-knowledge-section" v-if="knowledgeData.relatedKnowledges && knowledgeData.relatedKnowledges.length">
      <text class="section-title">相关知识点</text>
      <view class="related-stars">
        <view class="star-item" v-for="item in knowledgeData.relatedKnowledges" :key="item.id" @click="navigateToKnowledge(item.id)">
          <view class="star-icon" :class="{ active: item.isMastered }">
            <text>{{ item.isMastered ? '★' : '☆' }}</text>
          </view>
          <text class="star-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 练习题区域 -->
    <view class="exercises-section" v-if="knowledgeData.exercises && knowledgeData.exercises.length">
      <text class="section-title">练习题目</text>
      <view class="exercise-list">
        <view class="exercise-item" v-for="exercise in knowledgeData.exercises" :key="exercise.id">
          <view class="exercise-header">
            <text class="exercise-number">题目 {{ exercise.number }}</text>
            <text class="exercise-type">{{ exercise.type }}</text>
            <text class="exercise-difficulty" :class="exercise.difficulty">{{ exercise.difficulty }}</text>
          </view>
          <text class="exercise-content">{{ exercise.content }}</text>
          <button class="exercise-button" @click="viewExercise(exercise.id)">查看详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 移除iconfont.css引入

export default {
  components: {
    // 移除未使用的Star组件注册
  },
  data() {
    return {
      knowledgeData: {
        id: 0,
        title: '',
        description: '',
        videoUrl: '', // 实际视频URL
        videoTitle: '',
        videoCover: '',
        teacher: '',
        principle: '',
        principleImage: '',
        examples: '',
        relatedKnowledges: [],
        exercises: []
      },
      isFavorite: false,
      isVideoPlaying: false,
      videoDuration: '14:32'
    };
  },
  onLoad(options) {
    // 获取路由参数
    const knowledgeId = Number(options.id || 0);
    
    knowledgeId && this.getKnowledgeDetail(knowledgeId);
  },
  methods: {
    // 获取知识点详情
    getKnowledgeDetail(knowledgeId) {
      try {
        // 模拟API请求
        setTimeout(() => {
          // 模拟数据，实际项目中应从API获取
          const mockData = {
            id: knowledgeId,
            title: '牛顿第三定律',
            description: '<p>牛顿第三定律：当两个物体相互作⽤时，它们之间的作⽤⼒和反作⽤⼒总是⼤小相等、方向相反，作⽤在同一条直线上。</p>',
            videoUrl: '', // 实际视频URL
            videoTitle: '牛顿第三定律详解与应用',
            videoCover: '/static/video-cover.png', // 视频封面图
            teacher: '北京⼤学 张教授',
            principle: '<p>定律表述<br/>两个物体之间的相互作⽤⼒总是大小相等、方向相反。即 F₁ = -F₂。<br/><br/>重要特点<br/>作⽤⼒与反作⽤⼒是同时产⽣的，它们作⽤于不同物体上。这⼀定律揭示了自然界中的相互性，是理解许多物理现象的基础。</p>',
            principleImage: '/static/principle.png', // 原理图示
            examples: '<p>⽕箭前进、游泳前进、⾏⾛运动等都是第三定律的应用实例。当⽕箭向后喷射⽓体时，气体对火箭产⽣向前的反作⽤⼒，推动⽕箭升空。</p>',
            relatedKnowledges: [
              { id: 101, name: '作用力与反作用力', isMastered: true },
              { id: 102, name: '动量守恒', isMastered: true },
              { id: 103, name: '碰撞问题', isMastered: false }
            ],
            exercises: [
              { id: 201, number: 1, type: '分析题', difficulty: '中等', content: '火箭飞行中的作用力与反作用力分析' },
              { id: 202, number: 2, type: '计算题', difficulty: '较难', content: '两物体碰撞后速度的计算问题' },
              { id: 203, number: 3, type: '选择题', difficulty: '简单', content: '识别生活中的牛顿第三定律现象' }
            ]
          };

          this.knowledgeData = mockData;
        }, 500);
      } catch (error) {
        uni.showToast({
          title: '获取知识点详情失败',
          icon: 'none'
        });
        console.error('Failed to get knowledge detail:', error);
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 切换收藏状态
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
      uni.showToast({
        title: this.isFavorite ? '收藏成功' : '取消收藏成功',
        icon: 'success'
      });
    },

    // 导航到相关知识点
    navigateToKnowledge(id) {
      uni.navigateTo({
        url: `/pages/knowledge/knowledgeDetail?id=${id}`
      });
    },

    // 查看习题详情
    viewExercise(id) {
      // 实际项目中应跳转到习题详情页面
      uni.showToast({
        title: `查看习题 ${id} 详情`,
        icon: 'none'
      });
    },

    // 播放视频
    playVideo() {
      if (!this.knowledgeData.videoUrl) {
        uni.showToast({
          title: '暂无视频资源',
          icon: 'none'
        });
        return;
      }
      this.isVideoPlaying = true;
    },

    // 视频播放结束
    onVideoEnded() {
      this.isVideoPlaying = false;
    }
  }
};
</script>

<style scoped lang="scss">
.knowledge-detail-container {
  padding: 24rpx;
  background-color: #0f172a;
  min-height: 100vh;
  color: #e2e8f0;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: #e2e8f0;
  font-size: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
  max-width: 500rpx;
  text-align: center;
}

.save-btn {
  min-width: 140rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background-color: #3b82f6;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0 20rpx;
}

.save-btn.favorited {
  background-color: #f59e0b;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  margin: 40rpx 0 20rpx;
  padding-left: 20rpx;
  border-left: 8rpx solid #3b82f6;
}

.content-card {
  background-color: #1e293b;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 30rpx;
}

.video-container {
  background-color: #1e293b;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 30rpx;
}

.video-placeholder {
  position: relative;
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.video-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36rpx;
}

.video-time {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
}

.video-player {
  width: 100%;
  height: 400rpx;
  background-color: #000;
}

.video-info {
  padding: 20rpx 30rpx;
}

.video-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10rpx;
}

.video-teacher {
  font-size: 24rpx;
  color: #94a3b8;
}

.principle-img {
  width: 100%;
  height: auto;
  margin-top: 20rpx;
  border-radius: 10rpx;
}

.related-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

.star-item {
  flex: 0 0 calc(33.333% - 20rpx);
  background-color: #1e293b;
  border-radius: 15rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  text-align: center;
}

.star-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #334155;
  margin: 0 auto 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.star-icon.active {
  background-color: #f59e0b;
  color: white;
}

.star-name {
  font-size: 26rpx;
  color: #e2e8f0;
}

.exercise-list {
  margin-top: 20rpx;
}

.exercise-item {
  background-color: #1e293b;
  border-radius: 15rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.exercise-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.exercise-number {
  font-size: 26rpx;
  font-weight: bold;
  color: #e2e8f0;
}

.exercise-type {
  font-size: 24rpx;
  color: #e2e8f0;
  background-color: #334155;
  padding: 4rpx 12rpx;
  border-radius: 15rpx;
}

.exercise-difficulty {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 15rpx;
}

.exercise-difficulty.简单 {
  background-color: #10b981;
  color: #ffffff;
}

.exercise-difficulty.中等 {
  background-color: #f59e0b;
  color: #ffffff;
}

.exercise-difficulty.较难 {
  background-color: #ef4444;
  color: #ffffff;
}

.exercise-content {
  font-size: 26rpx;
  color: #e2e8f0;
  margin-bottom: 20rpx;
  line-height: 1.6;
}

.exercise-button {
  width: 100%;
  height: 70rpx;
  background-color: #3b82f6;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
  border: none;
}
</style>